import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
import axios from 'axios'
interface ListState {
  list: string[];
  loading: boolean;
  error: null | string;
}

export const asyncFetchList = createAsyncThunk("list/fetchList", async () => {
  const resp = await axios.get('/api/list')
  return resp.data.data;
});

const initialState: ListState = {
  list: ["a"],
  loading: true,
  error: null,
};

const listSlice = createSlice({
  name: "list",
  initialState,
  reducers: {},
  extraReducers: {
    [asyncFetchList.pending.type](state) {
      state.loading = true;
    },
    [asyncFetchList.fulfilled.type](state, action: PayloadAction<string[]>) {
      state.loading = false;
      state.list = action.payload;
    },
    [asyncFetchList.rejected.type](state, action) {		
			console.log(action);
				
      state.error = action.error.message
      state.loading = false;
    },
  },
});

export default listSlice;
